<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/normalize.css" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/swiper.css" />
    <title>小米商城</title>
</head>
<body>
    <div class="app">
        <div class="header">
            <div class="header-main">
                <div class="header-left">
                    <span class="header-item">小米商城</span>
                    <span class="sep">|</span>
                    <span class="header-item">MIUI</span>
                    <span class="sep">|</span>
                    <span class="header-item">IoT</span>
                    <span class="sep">|</span>
                    <span class="header-item">云服务</span>
                    <span class="sep">|</span>
                    <span class="header-item">天星数科</span>
                    <span class="sep">|</span>
                    <span class="header-item">有品</span>
                    <span class="sep">|</span>
                    <span class="header-item"> 小爱开放平台 </span>
                    <span class="sep">|</span>
                    <span class="header-item">企业团购</span>
                    <span class="sep">|</span>
                    <span class="header-item">资质证照</span>
                    <span class="sep">|</span>
                    <span class="header-item">协议规则</span>
                    <span class="sep">|</span>
                    <span class="header-item">
                        下载app
                        <div class="code">
                            <img src="./images/download.png" />
                            <div>小米商城APP</div>
                        </div>
                    </span>
                    <span class="sep">|</span>
                    <span class="header-item">Select Location</span>
                </div>
                <div class="header-right">
                    <span class="header-item">登录</span>
                    <span class="sep">|</span>
                    <span class="header-item">注册</span>
                    <span class="sep">|</span>
                    <span class="header-item">消息通知</span>
                    <span class="car">
                        购物车（0）
                        <div class="car-content">
                            购物车中还没有商品，赶紧选购吧！
                        </div>
                    </span>
                </div>
            </div>
        </div>

        <div class="site-header">
            <div class="container">
                <div class="logo">
                    <img src="./images/logo-mi2.png" />
                </div>
                <div class="type">
                    <div class="item">
                        Xiaomi手机
                        <div class="slide-down">
                            <div class="main">
                                <div class="main-item">
                                    <img src="./images/12pro.webp" />
                                    <div class="name">Xiaomi 12pro</div>
                                    <div class="price">4699起</div>
                                </div>
                                <div class="line"></div>
                                <div class="main-item">
                                    <img src="./images/12pro.webp" />
                                    <div class="name">Xiaomi 12pro</div>
                                    <div class="price">4699起</div>
                                </div>
                                <div class="line"></div>
                                <div class="main-item">
                                    <img src="./images/12pro.webp" />
                                    <div class="name">Xiaomi 12pro</div>
                                    <div class="price">4699起</div>
                                </div>
                                <div class="line"></div>
                                <div class="main-item">
                                    <img src="./images/12pro.webp" />
                                    <div class="name">Xiaomi 12pro</div>
                                    <div class="price">4699起</div>
                                </div>
                                <div class="line"></div>
                                <div class="main-item">
                                    <img src="./images/12pro.webp" />
                                    <div class="name">Xiaomi 12pro</div>
                                    <div class="price">4699起</div>
                                </div>
                                <div class="line"></div>
                                <div class="main-item">
                                    <img src="./images/12pro.webp" />
                                    <div class="name">Xiaomi 12pro</div>
                                    <div class="price">4699起</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">Redmi 红米 
                        <div class="slide-down">
                            <div class="main">
                                <div class="main-item">
                                    <img src="./images/k50.webp" />
                                    <div class="name">Redmi K50 pro</div>
                                    <div class="price">4699起</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">电视 </div>
                    <div class="item">笔记本</div>
                    <div class="item">平板</div>
                    <div class="item">家电</div>
                    <div class="item">路由器</div>
                    <div class="item">服务</div>
                    <div class="item">社区</div>
                </div>
            </div>
        </div>

        <div class="banner">
            <div class="container">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide bg1"></div>
                        <div class="swiper-slide bg2"></div>
                        <div class="swiper-slide bg3"></div>
                        <div class="swiper-slide bg4"></div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-pagination"></div>
                </div>

                <div class="nav">
                    <div class="nav-item">
                        <span>手机</span>
                        <img src="./images/arrow-1.png" />
                        <div class="children">
                            <div class="one"> <img src="./images/c1.webp" /> <span>Redmi K50 Pro</span> </div>
                            <div class="one"> <img src="./images/c2.webp" /> <span>Xiaomi 12X</span> </div>
                            <div class="one"> <img src="./images/c3.webp" /> <span>Xiaomi Civi</span> </div>
                            <div class="one"> <img src="./images/c4.webp" /> <span>Xiaomi 10S</span> </div>
                            <div class="one"> <img src="./images/c1.webp" /> <span>Redmi K50 Pro</span> </div>
                            <div class="one"> <img src="./images/c1.webp" /> <span>Redmi K50 Pro</span> </div>
                            <div class="one"> <img src="./images/c1.webp" /> <span>Redmi K50 Pro</span> </div>
                        </div>
                    </div>
                    <div class="nav-item">
                        <span>电视</span> <img src="./images/arrow-1.png" />
                        <div class="children">
                            <div class="one"> <img src="./images/c21.webp" /> <span> Redmi X65 2022款 </span> </div>
                            <div class="one"> <img src="./images/c22.webp" /> <span> 小米电视6 至尊版 55英寸 </span> </div>
                        </div>
                    </div>
                    <div class="nav-item">
                        <span>笔记本 平板</span> <img src="./images/arrow-1.png" />
                    </div>
                    <div class="nav-item">
                        <span>家电</span> <img src="./images/arrow-1.png" />
                    </div>
                    <div class="nav-item">
                        <span>只能 路由器</span> <img src="./images/arrow-1.png" />
                    </div>
                    <div class="nav-item">
                        <span>出行 穿戴</span> <img src="./images/arrow-1.png" />
                    </div>
                    <div class="nav-item">
                        <span>电源 配件</span> <img src="./images/arrow-1.png" />
                    </div>
                    <div class="nav-item">
                        <span>健康 儿童</span> <img src="./images/arrow-1.png" />
                    </div>
                    <div class="nav-item">
                        <span>耳机 音响</span> <img src="./images/arrow-1.png" />
                    </div>
                    <div class="nav-item">
                        <span>生活 箱包</span> <img src="./images/arrow-1.png" />
                    </div>
                </div>
            </div>
        </div>

        <div class="home-bottom">
            <div class="container">
                <div class="home-bottom-first"></div>
                <div class="home-bottom-bg bg1"></div>
                <div class="home-bottom-bg bg2"></div>
                <div class="home-bottom-bg bg3"></div>
            </div>
        </div>


        <div class="list-container">
            <div class="lang-container">
                <img src="./images/lang.webp" />
            </div>

            <div class="header-type">
                <div class="left">手机</div>
                <div class="right">查看更多</div>
            </div>

            <div class="shop-container">
                <div class="shop-left">
                    <img src="./images/s1.webp" />
                </div>
                <div class="shop-right">
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                </div>
            </div>

            <div class="header-type">
                <div class="left">智能穿戴</div>
                <div class="right">查看更多</div>
            </div>

            <div class="shop-container">
                <div class="shop-left">
                    <img src="./images/watch.webp" />
                </div>
                <div class="shop-right">
                    <div class="small">
                        <img src="./images/watch1.webp" /> <div class="font1">Xiaomi Watch S1</div> <div class="font2">腕事具备</div> <div class="font3">1999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/watch3.webp" /> <div class="font1">Redmi 手表</div> <div class="font2">35g超轻/1.4"大屏/多功能NFC/7天长续航</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/watch4.webp" /> <div class="font1">Redmi Buds 3半入耳真无线蓝牙耳机</div> <div class="font2">轻巧半入耳，舒适有天分</div> <div class="font3">189起</div>
                    </div>
                    <div class="small-two">
                        <div>
                            <p>
                                <span> Redmi Buds 3 青春版 </span>
                                <span class="price"> 99元 </span>
                            </p>
                            <img src="./images/small80.webp" width="80" height="80" />
                        </div>
                        <div>
                            <p>
                                <span class="read-more"> 浏览更多 </span>
                                <span class="hot"> 热门 </span>
                            </p>
                            <img src="./images/arrow-right-circle.png" width="80" height="80" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="header-type">
                <div class="left">笔记本 | 平板</div>
                <div class="right">查看更多</div>
            </div>

            <div class="shop-container">
                <div class="shop-left">
                    <img src="./images/b1.webp" />
                </div>
                <div class="shop-right">
                    <div class="small">
                        <img src="./images/b2.webp" /> <div class="font1">Redmi Book Pro 15 2022</div> <div class="font2">全新12代英特尔处理器</div> <div class="font3">1999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/b3.webp" /> <div class="font1">Redmi G 2021 R7/RTX3050Ti/16G/51</div> <div class="font2">有光追，才是高性能游戏本</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/b4.webp" /> <div class="font1">Pro 14 增强版 i5 独显 - Win11</div> <div class="font2">2.5K超视网膜全面屏</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/watch3.webp" /> <div class="font1">Redmi 手表</div> <div class="font2">35g超轻/1.4"大屏/多功能NFC/7天长续航</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/watch4.webp" /> <div class="font1">Redmi Buds 3半入耳真无线蓝牙耳机</div> <div class="font2">轻巧半入耳，舒适有天分</div> <div class="font3">189起</div>
                    </div>
                    <div class="small-two">
                        <div>
                            <p>
                                <span> Redmi Buds 3 青春版 </span>
                                <span class="price"> 99元 </span>
                            </p>
                            <img src="./images/small80.webp" width="80" height="80" />
                        </div>
                        <div>
                            <p>
                                <span class="read-more"> 浏览更多 </span>
                                <span class="hot"> 热门 </span>
                            </p>
                            <img src="./images/arrow-right-circle.png" width="80" height="80" />
                        </div>
                    </div>
                </div>
            </div>


            <div class="header-type">
                <div class="left">家电</div>
                <div class="right">查看更多</div>
            </div>

            <div class="shop-container">
                <div class="shop-left-two">
                    <div> <img src="./images/tv1.webp" /> </div>
                    <div> <img src="./images/tv2.webp" /> </div>
                </div>
                <div class="shop-right">
                    <div class="small">
                        <img src="./images/tv3.webp" /> <div class="font1">小米电视6 65”  OLED</div> <div class="font2">OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</div> <div class="font3">1999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/b3.webp" /> <div class="font1">Redmi G 2021 R7/RTX3050Ti/16G/51</div> <div class="font2">有光追，才是高性能游戏本</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/b4.webp" /> <div class="font1">Pro 14 增强版 i5 独显 - Win11</div> <div class="font2">2.5K超视网膜全面屏</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/watch3.webp" /> <div class="font1">Redmi 手表</div> <div class="font2">35g超轻/1.4"大屏/多功能NFC/7天长续航</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/watch4.webp" /> <div class="font1">Redmi Buds 3半入耳真无线蓝牙耳机</div> <div class="font2">轻巧半入耳，舒适有天分</div> <div class="font3">189起</div>
                    </div>
                    <div class="small-two">
                        <div>
                            <p>
                                <span> Redmi Buds 3 青春版 </span>
                                <span class="price"> 99元 </span>
                            </p>
                            <img src="./images/small80.webp" width="80" height="80" />
                        </div>
                        <div>
                            <p>
                                <span class="read-more"> 浏览更多 </span>
                                <span class="hot"> 热门 </span>
                            </p>
                            <img src="./images/arrow-right-circle.png" width="80" height="80" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="lang-container" style="margin-top: 30px;">
                <img src="./images/kaiguan.webp" />
            </div>

            <div class="header-type">
                <div class="left">厨房电器</div>
                <div class="right">查看更多</div>
            </div>

            <div class="shop-container">
                <div class="shop-left-two">
                    <div> <img src="./images/j1.webp" /> </div>
                    <div> <img src="./images/j2.webp" /> </div>
                </div>
                <div class="shop-right">
                    <div class="small">
                        <img src="./images/j3.webp" /> <div class="font1">小米净水器1200G</div> <div class="font2">3.2L/min大流量，鲜活首杯水</div> <div class="font3">1999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/b3.webp" /> <div class="font1">Redmi G 2021 R7/RTX3050Ti/16G/51</div> <div class="font2">有光追，才是高性能游戏本</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/b4.webp" /> <div class="font1">Pro 14 增强版 i5 独显 - Win11</div> <div class="font2">2.5K超视网膜全面屏</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/watch3.webp" /> <div class="font1">Redmi 手表</div> <div class="font2">35g超轻/1.4"大屏/多功能NFC/7天长续航</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/s2.webp" /> <div class="font1">Redmi K50 Pro</div> <div class="font2">2K直屏的狠旗舰</div> <div class="font3">2999起</div>
                    </div>
                    <div class="small">
                        <img src="./images/watch4.webp" /> <div class="font1">Redmi Buds 3半入耳真无线蓝牙耳机</div> <div class="font2">轻巧半入耳，舒适有天分</div> <div class="font3">189起</div>
                    </div>
                    <div class="small-two">
                        <div>
                            <p>
                                <span> Redmi Buds 3 青春版 </span>
                                <span class="price"> 99元 </span>
                            </p>
                            <img src="./images/small80.webp" width="80" height="80" />
                        </div>
                        <div>
                            <p>
                                <span class="read-more"> 浏览更多 </span>
                                <span class="hot"> 热门 </span>
                            </p>
                            <img src="./images/arrow-right-circle.png" width="80" height="80" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="header-type">
                <div class="left">视频</div>
                <div class="right">查看更多</div>
            </div>

            <div class="shop-container">
                <div class="video-container">
                    <img class="top-img" src="./images/v.webp" />
                    <p> 2021年春季新品发布会第一场 </p>
                </div>
                <div class="video-container">
                    <img class="top-img" src="./images/v2.webp" />
                    <p> Redmi 10X系列发布会 </p>
                </div>
                <div class="video-container">
                    <img class="top-img" src="./images/v3.webp" />
                    <p> 小米10 青春版 发布会 </p>
                </div>
                <div class="video-container">
                    <img class="top-img" src="./images/v4.webp" />
                    <p> 小米10 8K手机拍大片 </p>
                </div>
            </div>
        </div>

        <div class="site-footer">
            <div class="info">
                <span> <img src="./images/7.png" /> 预约维修服务 </span>
                <div class="line"></div>
                <span> 7天无理由退货 </span>
                <div class="line"></div>
                <span> 15天免费换货 </span>
                <div class="line"></div>
                <span> 满69包邮 </span>
                <div class="line"></div>
                <span> 520余家售后网点 </span>
            </div>
            <div class="site-bottom">
                <div class="left">
                    <dl>
                        <dt> 帮助中心 </dt>
                        <dd> 账户管理 </dd>
                        <dd>订单操作</dd>
                        <dd>购物指南</dd>
                    </dl>
                    <dl>
                        <dt> 服务支持 </dt>
                        <dd> 售后政策 </dd>
                        <dd> 自助服务 </dd>
                        <dd> 相关下载 </dd>
                    </dl>
                    <dl>
                        <dt> 线下门店 </dt>
                        <dd> 小米之家 </dd>
                        <dd> 服务网点 </dd>
                        <dd> 授权体验店/专区 </dd>
                    </dl>
                    <dl>
                        <dt> 关于小米 </dt>
                        <dd> 了解小米 </dd>
                        <dd> 加入小米 </dd>
                        <dd> 投资者关系 </dd>
                        <dd> 企业社会责任 </dd>
                        <dd> 廉洁举报 </dd>
                    </dl>
                    <dl>
                        <dt> 关注我们 </dt>
                        <dd> 新浪微博 </dd>
                        <dd> 官方微信 </dd>
                        <dd> 联系我们 </dd>
                        <dd> 公益基金会 </dd>
                    </dl>
                    <dl>
                        <dt> 特色服务 </dt>
                        <dd> F 码通道 </dd>
                        <dd> 礼物码 </dd>
                        <dd> 防伪查询 </dd>
                    </dl>
                </div>
                <div class="line"></div>
                <div class="right">
                    <div class="phone"> 400-100-5678 </div>
                    <div class="time"> 8:00-18:00（仅收市话费）</div>
                    <div class="service"> 人工客服 </div>
                    <div class="follow"> 关注小米: <img src="./images/weibo.png" />  <img src="./images/wechat.png" /> </div>
                </div>
            </div>
        </div>

        <div class="fotter">
            <div class="fotter-container">
                <div class="top">
                    <img src="./images/logo-mi2 (1).png" width="50" height="50" />
                    <div class="content">
                        <p>小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 | Select Location</p>
                        <p>北京互联网法院法律服务工作站 | 中国消费者协会 | 北京市消费者协会</p>
                        <p class="color">© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
                        <p class="color">（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告</p>
                        <p class="color">增值电信业务许可证 网络食品经营备案 京食药网食备202010048   食品经营许可证</p>
                        <p class="color">违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                        <p class="fotter-img">
                            <img src="./images/f1.png" />
                            <img src="./images/f2.png" />
                            <img src="./images/f3.png" />
                            <img src="./images/f4.png" />
                            <img src="./images/f5.png" />
                        </p>
                    </div>
                </div>
                <div class="bottom">
                    
                </div>
            </div>
        </div>
    </div>
    <script src="./js/swipwr.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            autoplay: true,
            loop: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
            },
        });
      </script>
</body>
</html>